<template>
	<view class="content">
		<!-- 订单状态 -->
		<view class="status_box">
			<view class="status_wrapper_box">
				<image v-if="orderVO.order.orderStatus == 1 || orderVO.order.orderStatus == 3" :src="imageUrl"></image>
				<text>{{orderVO.order.statusMean}}</text>
			</view>			
		</view>
		<!-- 商品条 -->
		<view v-for="(item, index) in orderVO.orderItemList" :key="index">
			<goodsListItem @cancleOrderItem="cancleOrderItem" :order="item"></goodsListItem>
		</view>
		<!-- 订单详细信息 -->
		<view class="info">
			<uni-list>
				<uni-list-item title="订单编号：" :right-text="orderVO.order.orderSn"></uni-list-item>
				<uni-list-item title="客户姓名：" :right-text="orderVO.order.userName" ></uni-list-item>
				<uni-list-item title="客户电话：" :right-text="orderVO.order.userPhone" ></uni-list-item>
				<uni-list-item title="预定时间：" :right-text="orderVO.order.scheduledTime" ></uni-list-item>
				<uni-list-item title="下单时间：" :right-text="orderVO.order.orderTime" ></uni-list-item>
				<uni-list-item title="支付方式：" :right-text="orderVO.order.paymentMod"></uni-list-item>
				<uni-list-item title="支付时间：" :right-text="orderVO.order.payTime" ></uni-list-item>
				<uni-list-item title="商家电话：" :right-text="orderVO.order.storePhone"></uni-list-item>
			</uni-list>
		</view>
		<!-- 账单 -->
		<view class="bill">
			<uni-list>
				<uni-list-item title="商品总价：" :right-text="orderVO.order.totalMoney"></uni-list-item>
				<view>
					<uni-list-item title="促销立减：" @click="open" :right-text="couponRightText" clickable ></uni-list-item>
					<!-- <uni-list-item title="促销立减：" @click="open" v-else :right-text="order.discountAmount" clickable ></uni-list-item> -->
					<!-- 普通弹窗 -->
					<uni-popup ref="popup" @maskClick="close" background-color="#fff">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<view class="coupon_title">店铺优惠券</view>
							<!-- 选择内容 -->
							<view class="coupon_item">
								<cc-couponList :colors="colors" :selectedCouponIds="orderVO.order.selectedCoupons" :couponList="orderVO.order.useableCoupons" useInOrder=true @itemClick="selectCoupon"></cc-couponList>
							</view>
						</view>	
					</uni-popup>
					
				</view>
				<uni-list-item title="实付款：" :right-text="orderVO.order.settlementMoney"></uni-list-item>
			</uni-list>
		</view>
		<view class="tools">
			<view class="agent">
				<uni-icons class="agent_icon" type="headphones" size=20 color="#646566"></uni-icons>
				<text class="agent_text">客服</text>
			</view>
				<!-- <button class="navigator">导航</button> -->
				<button class="agent_button" v-if="orderVO.order.orderStatus != 2 " @click="oneMore" >再来一单</button>
			<button class="agent_button" v-if="orderVO.order.orderStatus == 2" @click="payBill">付款</button>
		</view>
	</view>
</template>

<script>
	import goodsListItem from '@/components/order/goods-list-item.vue'
	import {getUnusedCouponList, getPastCouponList} from '@/api/coupon.js'
	import {getUserOrder, useCouponInOrder, payBill, cancleOrderItem, oneMore} from '@/api/order.js'
	export default {
		components: {
			goodsListItem
		},
		data() {
			return {
				orderId: 0,
				colors: '#e54d42',		// 优惠券组件使用的颜色
				// isSelected: false,		// 是否选择了优惠券
				options: [{	
					icon: 'headphones',
					text: '客服'
				}],
				couponRightText: '',
				// buttonGroup: [
				// {
				//   text: '再来一单',
				//   backgroundColor: '#ff0000',
				//   color: '#fff'
				// }],
				orderVO: {
					order: {
						statusMean: '',
						orderSn: '',
						userName: '',
						orderTime: '',
						userPhone: '',
						scheduledTime: '',
						paymentMod: '',
						storePhone: '',
						totalMoney: 0,
						discountMoney: 0,
						settlementMoney: 0,
						payTime: '',
						useableCoupons: [], // 可使用的优惠券的列表（所有）
						selectedCoupons: [] // 选择使用的优惠券id列表
					},
					orderItemList: []
				},
				latitude:23.106574, //纬度
				longitude:113.324587,//经度
				imageUrl: '../../static/pro-success.png'
			}
		},
		onLoad(option) {
			if (option.orderId == null || option.orderId == undefined) {
				
			} else {
				this.orderId = option.orderId	// 模拟
			}
			this.getOrderInfo(this.orderId)
		},
		methods: {
			
			// 查询订单的信息
			getOrderInfo(orderId) {
				getUserOrder({
					orderId: orderId
				}, (res) => {
					this.orderVO = res.data.data
					// 如果订单使用了优惠券，更改促销立减显示状态，且给优惠券id列表赋值
					if (this.orderVO.order.selectedCoupons.length > 0) {
						this.couponRightText = this.orderVO.order.discountMoney
					} else {
						this.couponRightText = '你有' + this.orderVO.order.useableCoupons.length + '张优惠券可用'
					}
					this.$forceUpdate()
				})
			},
			
			
			// 再来一单
			oneMore() {
				oneMore({
					id: this.orderVO.order.id
				}, (res) => {
					this.getOrderInfo(res.data.data)
				})
			},
			
			// 取消订单
			cancleOrderItem(orderId, status) {
				cancleOrderItem({
					id: orderId,
					status: status
				}, (res) => {
					if (res.data.code == 0) {
						uni.switchTab({
							url: '../../pages/order/list'
						})						
					} else {
						this.getOrderInfo()
					}
				})
			},
			
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			
			close() {
				// 查询更新order
				this.getOrderInfo(this.orderId)
			},
			
			// 选择优惠券
			selectCoupon(id) {
				// 一种方式：使用id数组，仅有一次请求，但是触发是关闭弹出层，不知道其他特殊情况，如手机的返回键和桌面键以及直接删除整个小程序
				// this.couponIdList.push(id)
				// this.couponIdList.filter(item => item != id)
				
				// 第二种方式，直接发送请求，多次请求，但不会出现差错
				
				useCouponInOrder({
					couponId: id,
					orderId: this.orderId
				}, (res) => {
					// 优惠券扣减金额 且改变总计金额 以及订单使用了这些优惠券
					// 什么都不用干
				})
			},
			
			// 付款
			payBill() {
				payBill({
					orderId: this.orderId
				}, (res) => {
					this.getOrderInfo(this.orderId)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: rgb(244, 244, 244);
		font-family: PingFangSC-Regular, sans-serif;
	}
	
	.status_box {
		width: 720upx;
		height: 85upx;
		line-height: 85upx;
	}
	
	.status_wrapper_box {
		width: 200upx;
		height: 100upx;
		margin: 0 auto;
	}
	
	.status_box image {
		width: 60upx;
		height: 60upx;
		vertical-align: middle;
	}
	
	.status_box text {
		width: 60upx;
		height: 60upx;
		vertical-align: middle;
	}
	
	map {
		width: 720upx;
		height: 200upx;
		margin: 15upx 15upx;
	}
	
	.info {
		width: 720upx;
		margin: 0 15upx;
		border-radius: 15upx;
	}
	
	.bill {
		width: 720upx;
		margin: 0 15upx;
		padding-bottom: 100upx;
		border-radius: 15upx;
	}
	
	.tools {
		width: 750upx;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		background-color: rgb(244, 244, 244);	
		justify-content: flex-end;
		align-items: center;
	}
	
	.agent {
		height: 65upx;
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0 20upx;
		padding: 0 10upx;
	}
	
	.agent_icon {
		width: 36upx;
		height: 36upx;
	}
	
	.agent_text {
		margin-top: 2upx;
		font-size: 22upx;
		color: #646566;
	}
	
	.agent_button {
		/* float: right; */
		height: 65upx;
		font-size: 25upx;
		margin-right: 0;
		border-radius: 30upx;
		color: #ffffff;
		background-color: rgb(226, 35, 26);
	}
	
	
	
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		// height: 300upx;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 5px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}
	
	.coupon_title {
		// align-items: center;
		// float: left;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}
	
	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>
